<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrapValidator.min.css">


    <style>
        .pageHeader {
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        #searchWords {
            width: 300px;
        }
        .contentTop {
            position: relative;
        }
        .contentTop .addButtonDiv {
           position: absolute;
            top: 0;
            right: 20px;
        }

        .contentBottom {
            margin-top: 25px;
        }

        .contentBottom table td
        ,.contentBottom table th{
         text-align: center;
        }
        td.operation a {
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
        }


        .pageBar {
           float: right;
        }
        .uploadImgShow {
            margin-left: 60px;
            margin-bottom: 20px;
        }
        .uploadImgShow img {
            width: 140px;
            height: 140px;
        }
    </style>


</head>
<body>
<div class="container">
    <div class="row">
        <div class="pageHeader col-md-12">
        <h2>商品管理</h2>
    </div>


         <div class="content">
             <!-- 内容盒子上半部分-->
             <div class="contentTop col-md-12">
                 <form class="form-inline">

                     <select class="form-control">
                         <option>按商品名称查询</option>
                         <option>2</option>
                         <option>3</option>
                         <option>4</option>
                         <option>5</option>
                     </select>
                     <div class="form-group">
                         <label for="searchWords"></label>

                         <input type="text" class="form-control" id="searchWords" placeholder=" 请输入关键词">

                     </div>
                     <button type="button" class="btn btn-primary">
                         <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                         查询</button>
                 </form>

                 <div class="addButtonDiv">
                     <button id="addGoodBtn" type="button" class="btn btn-primary">
                         <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>
                         添加商品</button>
                 </div>
             </div>
             <!-- 内容盒子上半部分结束-->


            <!-- 内容盒子下半部分-->
             <div class="contentBottom col-md-12">
                 <!-- 数据列表开始-->
                 <table class="table table-bordered table-striped">
                     <thead>
                     <tr>
                         <th>编号</th>
                         <th>商品名称信息</th>
                         <th>价格</th>
                         <th>状态</th>
                         <th>操作</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>Mark</td>
                         <td>Otto</td>
                         <td>@mdo</td>
                         <td class="operation">
                             <a class="showPage" href="javascript:" data-url="Mall/GoodsDetail.html"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>查看</a>
                             <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                         </td>
                     </tr>


                     </tbody>
                 </table>

                 <!-- 数据列表end-->

                 <!--分页开始-->
                 <div class="pageBar">
                     <nav aria-label="Page navigation">
                         <ul class="pagination">
                             <li>
                                 <a href="#" aria-label="Previous">
                                     <span aria-hidden="true">&laquo;</span>
                                 </a>
                             </li>
                             <li class="active"><a href="#">1</a></li>
                             <li><a href="#">2</a></li>
                             <li><a href="#">3</a></li>
                             <li><a href="#">4</a></li>
                             <li><a href="#">5</a></li>
                             <li>
                                 <a href="#" aria-label="Next">
                                     <span aria-hidden="true">&raquo;</span>
                                 </a>
                             </li>
                         </ul>
                     </nav>
                 </div>
             </div>
             <!-- 分页end-->



         </div>
        <!-- end-->


    </div>
</div>

<!--添加模态框开始-->
<div class="modal fade" id="addGoodsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">

            <h3 class="modal-title" id="exampleModalLabel">添加商品</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" id="addGoodsForm">
                <div class="form-group">
                <label for="goodsName" class="col-md-2 control-label">商品名称</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="goodsName" placeholder="请输入商品名称" name="goodsName">
                </div>
            </div>
                <div class="form-group">
                    <label for="goodsDescription" class="col-md-2 control-label">商品描述</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="goodsDescription" placeholder="请输入商品描述" name="goodsDescription">
                    </div>
                </div>

                <div class="form-group ">
                    <label for="goodsType" class="control-label col-md-2">所属分类</label>
                    <div class="col-md-2">
                        <select class="form-control" name="goodsLevel1" id="goodsType1">
                            <option value="">请选择品类</option>

                        </select>
                        </div>

                    <div class="col-md-2" id="secondSelect" style="display: none;">
                        <select class="form-control" name="goodsLevel2" id="goodsType2">


                        </select>
                    </div>

                </div>
                <div class="form-group ">
                    <label for="goodsPrice" class="control-label col-md-2">商品价格</label>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="goodsPrice" name="goodsPrice" placeholder="价格">
                            <span class="input-group-addon">元</span>
                        </div>
                    </div>

                    <label for="goodsStock" class="control-label col-md-2">商品存库</label>
                    <div class="col-md-3">
                        <div class="input-group ">
                            <input type="text" class="form-control" id="goodsStock" name="goodsStock" placeholder="库存">
                            <span class="input-group-addon">件</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="exampleInputFile" class="control-label col-md-2">商品图片</label>
                    <input type="file" id="exampleInputFile" class="col-md-3">

                </div>
                <!-- 上传完成的缩略图在这里展示-->
                <div class="uploadImgShow">
                    <!-- 示例图片占位置，可以删，图片大小是140x140-->
                    <img src="../images/20.png" alt="图片出错了" class="img-rounded img-responsive">
                </div>
                <!-- 上传完成的缩略图在这里展示结束-->

                <!-- 富文本编辑器-->
                <div class="form-group ">
                    <label for="goodsDetail" class="control-label col-md-2">商品详情</label>
                    <div class="col-md-10" id="goodsDetail"></div>
                </div>
            </form>
        </div>


        <div class="modal-footer">
            <button type="button" class="btn btn-default closeEditBtn">退出编辑</button>
            <button type="button" class="btn btn-primary" id="saveGoodsForm">确认提交</button>
        </div>
    </div>
    </div>
</div>
<!--添加模态框结束-->

<!-- 提示模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="smallModal">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p> 确定要退出编辑吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default closeThisModel">直接退出</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" >继续编辑</button>
            </div>
        </div>
    </div>
</div>
<!-- 提示模态框end -->



<script src="../js/jquery-2.1.1.js"></script>
<script src="../layer/layer.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/wangEditor.min.js"></script>
<script src="../bootstrap/js/bootstrapValidator.min.js"></script>

<script type="text/javascript">

    //jq 函数开始
    $(function () {

        modelReset();
        //富文本编辑器加载
        editorInit();

        //表单校验规则加载
        formValidator();

        //样板下拉框数据，应该从后台加载过来,可以删除
        var selectData = {
            "女歌手": ["ladygaga", "adele", "霉霉", "KellyClarkson", "CélineDion"],
            "手机": ["三星", "华为", "小米"],
            "电脑": ["华硕", "戴尔", "联想"]
        };

        //联动加载触发
        selectLevel(selectData);

        deleteClickEvent();

        showPageClickEvent();


        //点击添加商品按钮
        modalShow("#addGoodBtn", '#addGoodsModal');

        //点击提交按钮
        subClickEvent("#saveGoodsForm", '#addGoodsForm');

        //点击“退出编辑”时
        $(".closeEditBtn").on("click", function () {
            var nullCount = 0;//计算空的输入框的数量
            var $formData = $("#addGoodsForm").serializeArray();//获取整个表单的 name 和 value 值


            //遍历看看是否有空值，如果有，那就nullCount+1，
            $.each($formData, function (index, ele) {
                var $eleValue = $.trim(ele.value);
                if ($eleValue == "") {
                    nullCount += 1;


                }

            });

            //如果空的输入框的数量刚好和输入控件数量相等，说明什么都没填或者是填了又删掉，作死
            //那就直接退出模态框
            if (nullCount == $formData.length) {
                $('#addGoodsModal').modal('hide');
                return false;
            }

            //小模态框提示出现
            $('#smallModal').modal({show: true, backdrop: 'static', keyboard: false});


        });


        //点击“直接退出”时
        $(".closeThisModel").on("click", function () {
            $('.modal').modal('hide');

        });

        //当模态框隐藏时
        $('#addGoodsModal').on('hide.bs.modal', function (e) {
            //清空表单和校验样式
            $('#addGoodsForm').data('bootstrapValidator').resetForm(true);

            //清空下拉框并且隐藏
            $("#secondSelect").css("display", "none");

            //这个改的时候，一定要取消注释，清空，现在只是为了演示
//            $("#goodsType2").empty();
        });


    });

    //富文本编辑器加载
    function editorInit(){
        var E = window.wangEditor
        var editor = new E('#goodsDetail')

        // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        //editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

        editor.create();
    }

    //添加商品的表单校验规则，ajax 提交请看这里(～￣▽￣)～
    function formValidator() {
        $('#addGoodsForm').bootstrapValidator({
            message: '这个值是假的兄弟！',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                goodsName: {
                    message: '商品名称无效',
                    validators: {
                        notEmpty: {
                            message: '商品名称是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 2,
                            max: 25,
                            message: '商品名称必须大于2，长度小于25个字符。 '
                        }
                    }
                },
                goodsDescription: {
                    message: '商品描述无效',
                    validators: {
                        notEmpty: {
                            message: '商品描述是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 2,
                            max: 30,
                            message: '商品描述必须大于2，长度小于30个字符。 '
                        }
                    }
                },
                goodsLevel1: {
                    validators: {
                        notEmpty: {
                            message: '一级分类不能是空的'
                        }
                    }
                },
                goodsLevel2: {
                    validators: {
                        notEmpty: {
                            message: '二级分类不能是空的'
                        }
                    }
                },
                goodsPrice: {
                    validators: {
                        notEmpty: {
                            message: '商品价格不能是空的'
                        },
                        greaterThan: {
                            value: 0,
                            inclusive: false,
                            message: '商品价格必须大于或等于1'
                        }
                    }
                },
                goodsStock: {
                    validators: {
                        notEmpty: {
                            message: '商品存库不能是空的'
                        },
                        greaterThan: {
                            value: 0,
                            inclusive: false,
                            message: '商品存库必须大于或等于1'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");
            //在这里做你想做的事情！！！！！！！

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            // var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            // $.post($form.attr('action'), $form.serialize(), function(result) {
            //      console.log(result);
            //  }, 'json');
        });
    }

    //下拉框联动
    function selectLevel(selectData) {


        //初始化 所有的一级分类的数据
        $.each(selectData, function (key, value) {
            var $option = $("<option></option>");
            $option.text(key);//获取当前一级分类
            $("#goodsType1").append($option);
        });





        //加载二级分类的数据
        $("#goodsType1").on("change", function () {
            //拿到当前一级分类
          var pro = $("#goodsType1 option:selected").text();

            if(pro == "请选择品类")
            {
                $("#secondSelect").css("display","none");
                return false;
            }

            //2级下拉菜单展现
            $("#secondSelect").css("display","block");

            //清空原有的city数据
            $("#goodsType2").empty();


            //根据一级分类，拿到所有的二级分类，然后根据二级分类创建option添加到goodsType2中
            $.each(selectData[pro], function (i, value) {
                $("#goodsType2").append("<option>" + value + "</option>");

            });
        });


    }

    //解决bootstrap 不同同时多个模态框的问题,重写模态框的JS
    function modelReset() {
        //解决模态框背景色越来越深的问题
        $(document).on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('body'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });

        function setModalsAndBackdropsOrder() {
            var modalZIndex = 1040;
            $('.modal.in').each(function(index) {
                var $modal = $(this);
                modalZIndex++;
                $modal.css('zIndex', modalZIndex);
                $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
            });
            $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
        }

        //覆盖Modal.prototype的hideModal方法
        $.fn.modal.Constructor.prototype.hideModal = function () {
            var that = this
            this.$element.hide()
            this.backdrop(function () {
                //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
                $('.modal.fade.in').length === 0 && that.$body.removeClass('modal-open')
                that.resetAdjustments()
                that.resetScrollbar()
                that.$element.trigger('hidden.bs.modal')
            })
        }
    }

    //点击钮提交事件，手动执行校验表单
    function subClickEvent(buttonId,formId) {
        $(buttonId).on("click",function() {

            $(formId).bootstrapValidator('validate');
        })

    }

    //模态框加载
    function modalShow(buttonId,modalId) {  //这个buttonId，前面需要用#或.

        $(buttonId).on("click",function() {
            $(modalId).modal({show: true, backdrop: 'static', keyboard: false});
        });
    }

    //删除链接点击
    function deleteClickEvent() {
        $(".deleteLink").on("click",function() {
            var $this = $(this);
            layer.confirm("确定要删除这条数据吗？",{btn: ['确定','不！']},
                    function() {
                        //点击确定的时候走这里
                        // 发送异步请求到后台删除数据
                        //$.get("UnPast.ashx", { id: $(this).attr("stuid") }
                        //拿到回调函数
                        $this.parent().parent().fadeOut("slow");

                        layer.msg('删除成功！', {icon: 1,time:900});
                    })

        })
    }

    //查看链接点击
    function showPageClickEvent() {
        //点击“返回”按钮
        $(".showPage").on("click", function () {
            var $href = $(this).data("url");

            //获取父页面的iframe 元素，并且更改它的src地址
            $("#myIframe", window.parent.document).attr("src",$href);

        })
    }
</script>
</body>
</html>